<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="600px">
        <el-form ref="form" :model="form" :rules="rules" label-width="140px">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="app配送费中文提示" prop="prompt">
            <el-input v-model="form.promptCn" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="app配送费英文提示" prop="prompt">
            <el-input v-model="form.promptEn" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="配送费设定">
            <div>优先级&nbsp;<el-input v-model="sort" size="mini" style="width: 50px;" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;满&nbsp;<el-input v-model="reductionFee" size="mini" style="width: 50px;" />&nbsp;配送费&nbsp;<el-input v-model="freightFee" style="width: 50px;" size="mini" />&nbsp;<el-button type="primary" size="mini" style="width: 50px;" @click="addDeliveryFeeSets">添加</el-button></div>
            <el-tag
              v-for="(self,index) in deliveryFeeSetTags"
              :key="index"
              closable
              style="margin-right: 10px; clear：left(right，both)"
              @close="delTag(index)"
            >  {{ self }}
            </el-tag>
          </el-form-item>
          <el-form-item label="是否默认" prop="defaultStatus">
            <el-radio v-for="itself in dict.true_false" :key="itself.id" v-model="form.defaultStatus" :label="itself.dictKey">{{ itself.dictValue }}</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" stripe style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="名称"       />
        <el-table-column label="app配送费提示"      >
          <template slot-scope="scope">
            <div>{{ scope.row.promptCn }}</div>
            <div>{{ scope.row.promptEn }}</div>
          </template>
        </el-table-column>
        <el-table-column label="配送费设定"       :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-tag
              v-for="(item,index) in scope.row.deliveryFeeSets"
              :key="index"
              style="margin-right: 10px; clear：left(right，both)"
            >  {{ '优先级:' + item.sort +'\xa0\xa0\xa0\xa0\xa0\xa0\xa0'+ '满' + item.reductionFee + '配送费' + item.freightFee + '.' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="defaultStatus" label="是否默认"      >
          <template slot-scope="scope">
            {{ dict.label.true_false[scope.row.defaultStatus] }}
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>
<script>
import crudFreightTemplate from '@/api/pms/freightTemplate'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'

const defaultForm = { id: null, name: null, deliveryFeeSets: [{ freightFee: null, reductionFee: null, sort: null }], defaultStatus: false, promptCn: null, promptEn: null }
export default {
  name: 'FreightTemplate',
  components: { pagination, crudOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['true_false'],
  cruds() {
    return CRUD({ title: '配送费模版', url: 'freightTemplate/page', sort: 'id:desc', crudMethod: { ...crudFreightTemplate }})
  },
  data() {
    return {
      sort: '',
      freightFee: '',
      reductionFee: '',
      deliveryFeeSetTags: [],
      deliveryFeeSets: [],
      permission: {
        add: ['admin', 'freightTemplate:add'],
        edit: ['admin', 'freightTemplate:edit'],
        del: ['admin', 'freightTemplate:del']
      },
      rules: {
        name: [
          { required: true, message: '配送费模版名称不能为空', trigger: 'blur' }
        ]
      },
      queryTypeOptions: [
        { key: 'name', display_name: '配送费模版名称' }
      ]
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    [CRUD.HOOK.beforeSubmit](crud) {
      crud.form.deliveryFeeSets = this.deliveryFeeSets
      this.deliveryFeeSetTags = []
      this.$refs.form.validate(rules => {
        if (!rules) {
          return this.$message.error('字段不能为空')
        }
      })
      return true
    },
    [CRUD.HOOK.afterSubmit](crud) {
      this.deliveryFeeSets = []
      this.deliveryFeeSetTags = []
      return true
    },
    [CRUD.HOOK.beforeSubmit](crud) {
      crud.form.deliveryFeeSets = []
      for (let i = 0; i < this.deliveryFeeSetTags.length; i++) {
        const startSort = this.deliveryFeeSetTags[i].toString().indexOf(':')
        const endSort = this.deliveryFeeSetTags[i].toString().indexOf('\xa0')
        const sort = this.deliveryFeeSetTags[i].substring(startSort + 1, endSort)
        const startReductionFee = this.deliveryFeeSetTags[i].toString().indexOf('满')
        const endReductionFee = this.deliveryFeeSetTags[i].toString().indexOf('配')
        const reductionFee = this.deliveryFeeSetTags[i].substring(startReductionFee + 1, endReductionFee)
        const startFreightFee = this.deliveryFeeSetTags[i].toString().indexOf('费')
        const endFreightFee = this.deliveryFeeSetTags[i].toString().indexOf('.')
        const freightFee = this.deliveryFeeSetTags[i].substring(startFreightFee + 1, endFreightFee)
        crud.form.deliveryFeeSets.push({ freightFee: freightFee, reductionFee: reductionFee, sort: sort })
      }
    },
    [CRUD.HOOK.afterAddCancel]() {
      this.deliveryFeeSetTags = []
      return true
    },
    [CRUD.HOOK.beforeToEdit](crud) {
      this.deliveryFeeSets = crud.selections[0].deliveryFeeSets
      for (let i = 0; i < crud.selections[0].deliveryFeeSets.length; i++) {
        this.deliveryFeeSetTags.push('优先级:' + crud.selections[0].deliveryFeeSets[i].sort + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + '满' + crud.selections[0].deliveryFeeSets[i].reductionFee + '配送费' + crud.selections[0].deliveryFeeSets[i].freightFee + '.')
      }
      return true
    },
    [CRUD.HOOK.afterEditCancel]() {
      this.deliveryFeeSetTags = []
      return true
    },
    [CRUD.HOOK.afterToEdit]() {
      return true
    },
    [CRUD.HOOK.beforeToAdd]() {
      this.deliveryFeeSets = []
      return true
    },
    addDeliveryFeeSets() {
      const options = this.deliveryFeeSetTags
      const deliveryFeeSetTag = '优先级:' + this.sort + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + '满' + this.reductionFee + '配送费' + this.freightFee + '.'
      if (deliveryFeeSetTag === null || deliveryFeeSetTag === '优先级满配送费' || this.sort === null ||
      this.sort === '' || this.reductionFee === null || this.freightFee === null || this.reductionFee === '' || this.freightFee === '') {
        this.$message({
          message: '属性值不能为空',
          type: 'warning',
          duration: 1000
        })
        return
      }
      if (options.indexOf(deliveryFeeSetTag) !== -1) {
        this.$message({
          message: '属性值不能重复',
          type: 'warning',
          duration: 1000
        })
        return
      }
      this.deliveryFeeSetTags.push(deliveryFeeSetTag)
      this.deliveryFeeSets.push({ freightFee: this.freightFee, reductionFee: this.reductionFee, sort: this.sort })
      this.freightFee = ''
      this.reductionFee = ''
      this.sort = ''
    },
    delTag(index) {
      this.deliveryFeeSetTags.splice(index, 1)
    }
  }
}
</script>

<style scoped>

</style>
